<template>
  <page-view :title="false" >
     <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="用户名">
              <a-input v-model="queryParam.username" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                <a-select-option value="1">启用</a-select-option>
                <a-select-option value="0">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="loadUserList()">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {pageNo: 1, pageSize: 10}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

      <div  class="table-operator">
        <a-button type="primary"  v-action:sysUserAdd  @click="handleCreate()">新增</a-button>
      </div>


      <a-table 
      ref="table"
      :columns="columns" 
      :rowKey="record => record.id"
      :dataSource="sysUserList" 
      :pagination="pagination"
      @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
            <a style="margin-right:10px;" href="javascript:;" v-action:sysUserEdit @click="handleEdit(record)">编辑</a>
            <a href="javascript:;" v-action:sysUserDelete  @click="handleDel(record)">删除</a>
        </span>
        <span slot="status" slot-scope="text">
          {{ text | statusFilter }}
        </span>

      </a-table>
    
    <sys-user-modal ref="UserModal" @ok="handleSaveOk" />
 
 </a-card>
  </page-view>

</template>
<script>
import { PageView } from '@/layouts'
import SysUserModal from './SysUserModal'
import { getUserList } from '@/api/sys'

export default {
  name: 'SysUser',
  components: {
    PageView,
    SysUserModal
  },
  data() {
    return {
      columns,
      visible: false,
      sysUser: {
        type: 1,
        orderNum: 1
      },
      pagination: {},
      sysUserList: [],
      queryParam: {pageNo: 1, pageSize: 10},
    }
  },
  methods: {
     handleTableChange (pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.queryParam = {
        pageSize: pagination.pageSize,
        pageNo: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      }
      this.loadUserList()
    },
    handleEdit(record) {
      this.$refs.UserModal.handleEdit(record)
    },
    handleCreate() {
     this.$refs.UserModal.handleCreate()
    },
    handleDel(record){
         delResource(record).then(res => {
           if(res.status == 0){
            this.$message.success('成功');
           }else{
              this.$message.error(res.msg)
           }
         })
    },
    // handler
    handleSaveOk () {
      console.log('接受子組件的通知')
       this.loadUserList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadUserList(){
        var _this = this
        getUserList(this.queryParam)
              .then(res => {
                const result = res.data
                _this.sysUserList = result.records
                _this.pagination = {
                  total: result.total,
                  pageSize: result.size,
                  current: result.current
                }
                console.log( _this.pagination)
              })
    }
  },
  created() {
   this.loadUserList()
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        1: '启用',
        0: '禁用'
      }
      return statusMap[status]
    }
  }
}


const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    width: '12%'
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    width: '12%'
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    key: 'mobile'
  },
  {
    title: 'email',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: '30%'
  }
]

</script>
